<template>
  <div class="article-box" v-if="this.article">
    <div class="author-info">
      <span class="date">发布于: {{this.article.create_at | date}}</span>
      <router-link :to='{name:"UserRoute",params:{name: article.author.loginname}}'>
        <span>作者: {{this.article.author.loginname}}</span>
      </router-link>
      <span class="read-count">阅读人数: {{this.article.visit_count}}</span>
      <span class="from">来自: {{this.article.tab}}</span>
    </div>
    <div class="title">{{this.article.title}}</div>
    <div id="content-box" ><div v-html="this.article.content"></div></div>
    <div v-for="reply in this.article.replies">
      <div class="recommend-box">
        <div class="avatar">
          <router-link :to="{name:'UserRoute',parrams:{name:reply.id}}">
            <img :src="reply.author.avatar_url" alt="">
          </router-link>
        </div>
        <div class="text">
          <div class="commend-title">
            <span class="name">{{reply.author.loginname}}</span>
            <span class="dateTime">回复于: {{reply.create_at | date}}</span>
          </div>
          <div class="reply-content">
            <p v-html="reply.content"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "article-com",
    data(){
      return {
        article:"",
      }
    },
    filters:{
      date(v){
        return v.substring(2,10) + " " + v.substring(11,18)
      }
    },
    methods:{
      refreshArticle(){
        this.$http({
          url: `https://cnodejs.org/api/v1${this.$route.path}`,
          method:'get',

        }).then((res) => {
          if(res.data.success === true){
            this.article = res.data.data;
            this.$emit("sendAuthorName",this.article.author.loginname);
          }else{
            this.article = '没有获取到相关数据。';
          }

        }).catch((res) =>{
          console.log("获取内容时出错。" ,res);
        })
      }
    },
    created(){
      this.refreshArticle();
    }
  }
</script>
<style>
  #content-box img{
    max-width:100%;
    max-height:100%;
  }
</style>
<style scoped>

</style>

<style lang="less" scoped>
  @import url('../assets/markdown-github.css');
.margin-top(@top:2rem){
  margin-top:@top;
}
.border(@size:1px,@color:lightgrey){
  border-width:@size;
  border-color:@color;
  border-style: solid;
  padding:1rem;
}
@blue: #76a5a5;
@deepBlue:lightblue;
.maxSize{
  width:100%;
  height:100%;
}
a{
  text-decoration: none;
  color:black;
}
 .article-box{
   background-color: #f4f4f4;
 }
  .article-box{
    .border();
    padding:2rem;
    width:55%;
    height:100%;
  }
  .author-info{
    font-size:17px;
    span{
      display: inline-block;
      padding:0px 1rem 0px 0px;
    }
    .read-count,.date{
      color:@blue;
    }
    .from{
      color:@deepBlue;
    }
  }

  .title{
    margin-top:2rem;
    font-size:1.5rem;
    font-weight: bold;
  }

  #content-box,
  .recommend-box{
    padding:1rem;
  }

  #content-box{
    margin-top:2rem;
    background-color: #e6e8ed;
    width:auto;
    height:100%;
    border-radius: 6px;
  }
  .recommend-box,
  .avatar,.text{
    display: flex;
  }

  .recommend-box{
    display: flex;
    justify-content: start;
    border-top:1px solid #b8d4f0;
    margin-top:1rem;
  }
  .avatar{
    margin-right:2rem;
    img{
      width:5rem;
      height:5rem;
    }
  }
  .text{
    flex-direction: column;
    .commend-title{
      font-size:16px;
      font-weight: bold;
      margin-bottom: 0.5rem;
      .name{
        color: #9aaeb6;
      }
      .dateTime{
        color: #c5e5ee;
      }
    }
  }


</style>
